☰

CSS Box Model

📦 Box Model

Margin Padding Border Border-radius Box-shadow Box-sizing

Assignment

Assignment 1 Assignment 2

🔲 1. margin (Shorthand)

📍 Definition: Sets the outer spacing (margin) around an element on all 4 sides at once. Margin creates space between the element's border and neighboring elements. The space is transparent and doesn't have a background color.
Default Value: 0 (no margin)
Values: auto | length (px, em, rem, %) | inherit
✦ Syntax Variations:
  • margin: 20px; - All 4 sides = 20px
  • margin: 10px 20px; - Top/Bottom = 10px, Left/Right = 20px
  • margin: 10px 15px 20px; - Top = 10px, Left/Right = 15px, Bottom = 20px
  • margin: 10px 15px 20px 25px; - Top, Right, Bottom, Left (clockwise)
  • margin: auto; - Centers horizontally if width is defined
✦ Margin = 25px (all sides) - Space around element
.element {
  background: lightblue;
  margin: 25px; /* 25px on all 4 sides */
}

🔲 2. margin-top

📍 Definition: Adds spacing only above the element (between element and previous element).
↑ Margin at top = 30px
.element {
  margin-top: 30px;
}

🔲 3. margin-right

📍 Definition: Adds spacing only on the right side of the element.
Margin at right = 40px ↑
.element {
  margin-right: 40px;
}

🔲 4. margin-bottom

📍 Definition: Adds spacing only below the element (between element and next element).
Margin at bottom = 25px ↓
.element {
  margin-bottom: 25px;
}

🔲 5. margin-left

📍 Definition: Adds spacing only on the left side of the element.
← Margin at left = 35px
.element {
  margin-left: 35px;
}

🔲 6. padding (Shorthand)

📍 Definition: Sets the inner spacing (padding) inside an element on all 4 sides at once. Padding creates space between the element's content and its border. The space inherits the element's background color.
Default Value: 0 (no padding)
Values: length (px, em, rem, %) | inherit
✦ Syntax Variations:
  • padding: 20px; - All 4 sides = 20px
  • padding: 10px 20px; - Top/Bottom = 10px, Left/Right = 20px
  • padding: 10px 15px 20px; - Top = 10px, Left/Right = 15px, Bottom = 20px
  • padding: 10px 15px 20px 25px; - Top, Right, Bottom, Left (clockwise)
✦ Padding = 25px (inner space) Content has breathing room
.element {
  background: lightblue;
  padding: 25px; /* 25px inside on all sides */
}

🔲 7. padding-top

📍 Definition: Adds inner spacing only above the content.
↓ Padding top = 30px Content pushed down
.element {
  padding-top: 30px;
}

🔲 8. padding-right

📍 Definition: Adds inner spacing only on the right side.
Padding right = 40px, content pushed left ←
.element {
  padding-right: 40px;
}

🔲 9. padding-bottom

📍 Definition: Adds inner spacing only below the content.
Padding bottom = 40px Content has space below ↑
.element {
  padding-bottom: 40px;
}

🔲 10. padding-left

📍 Definition: Adds inner spacing only on the left side.
← Padding left = 50px Content pushed right
.element {
  padding-left: 50px;
}

🔲 11. border (Shorthand)

📍 Definition: Creates a border around all 4 sides of an element. The border sits between margin (outside) and padding (inside). Shorthand for border-width, border-style, and border-color.
Syntax: border: width style color;
Values:
✦ Border: 4px solid green - All sides
.element {
  border: 4px solid green;
  /* width: 4px, style: solid, color: green */
}

🔲 12. border-top

📍 Definition: Creates a border only on the top edge of the element.
↓ Border only on top
.element {
  border-top: 5px solid #ff6b6b;
}

🔲 13. border-right

📍 Definition: Creates a border only on the right edge of the element.
← Border only on right
.element {
  border-right: 5px solid #4ecdc4;
}

🔲 14. border-bottom

📍 Definition: Creates a border only on the bottom edge of the element.
↑ Border only on bottom
.element {
  border-bottom: 5px solid #95e1d3;
}

🔲 15. border-left

📍 Definition: Creates a border only on the left edge of the element.
Border only on left →
.element {
  border-left: 5px solid #a8e6cf;
}

🔲 Border Style Examples

📍 Different Border Styles:
solid - Continuous line
dashed - Broken line
dotted - Dots
double - Double line
groove - 3D inset effect
border: 3px solid green; /* solid line */
border: 3px dashed green; /* dashed line */
border: 3px dotted green; /* dotted line */
border: 3px double green; /* double line */
border: 3px groove green; /* 3D effect */

🔲 16. border-radius (Shorthand)

📍 Definition: Rounds the corners of an element's border. Controls how all 4 corners are rounded at once. The larger the value, the more rounded the corners. Can make perfect circles with border-radius: 50%.
Default Value: 0 (sharp corners)
Values: length (px, em, rem, %) | inherit
Syntax Variations:
✦ border-radius: 20px - All corners rounded
.element {
  border: 3px solid green;
  border-radius: 20px; /* Rounds all 4 corners */
}

🔲 17. border-top-left-radius

📍 Definition: Rounds only the top-left corner of the element.
✦ Top-left corner rounded
.element {
  border: 3px solid green;
  border-top-left-radius: 30px;
}

🔲 18. border-top-right-radius

📍 Definition: Rounds only the top-right corner of the element.
Top-right corner rounded ✦
.element {
  border: 3px solid green;
  border-top-right-radius: 30px;
}

🔲 19. border-bottom-left-radius

📍 Definition: Rounds only the bottom-left corner of the element.
✦ Bottom-left corner rounded
.element {
  border: 3px solid green;
  border-bottom-left-radius: 30px;
}

🔲 20. border-bottom-right-radius

📍 Definition: Rounds only the bottom-right corner of the element.
Bottom-right corner rounded ✦
.element {
  border: 3px solid green;
  border-bottom-right-radius: 30px;
}

🔲 Border Radius Examples

📍 Different Radius Values:
Subtle: 5px
Medium: 20px
Large: 40px
Circle: 50%
border-radius: 5px; /* Subtle rounding */
border-radius: 20px; /* Medium rounding */
border-radius: 40px; /* Large rounding */
border-radius: 50%; /* Perfect circle or oval */

🔲 21. box-shadow (Complete Property)

📍 Definition: Creates one or more shadows around an element. The shadow is drawn around the element's border as if the element was floating above the page. Useful for creating depth and making elements stand out.
Syntax: box-shadow: offset-x offset-y blur spread color;
Default Value: none (no shadow)
✦ Components Explained:

🔲 22. box-shadow: offset-x (Horizontal Position)

📍 Definition: Controls horizontal position of the shadow. Positive values move shadow right, negative values move shadow left.
← Shadow moved right 20px
box-shadow: 20px 0 10px rgba(0,0,0,0.3);
/* 20px horizontal offset, 0 vertical */

🔲 23. box-shadow: offset-y (Vertical Position)

📍 Definition: Controls vertical position of the shadow. Positive values move shadow down, negative values move shadow up.
↑ Shadow moved down 20px
box-shadow: 0 20px 10px rgba(0,0,0,0.3);
/* 0 horizontal, 20px vertical offset */

🔲 24. box-shadow: blur-radius (Softness)

📍 Definition: Controls how soft/blurry the shadow is. Larger values = more blurred shadow. Must be non-negative (0 = sharp shadow).
blur: 0px (sharp)
blur: 10px (medium)
blur: 25px (soft)
blur: 40px (very soft)
box-shadow: 0 0 0 rgba(0,0,0,0.5); /* 0 = no blur */
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* 10px blur */
box-shadow: 0 0 25px rgba(0,0,0,0.4); /* 25px blur */
box-shadow: 0 0 40px rgba(0,0,0,0.3); /* 40px blur */

🔲 25. box-shadow: spread-radius (Shadow Size)

📍 Definition: Controls how much the shadow spreads/expands. Positive values make shadow bigger, negative values make it smaller.
spread: 0px (normal)
spread: 5px (larger)
spread: 10px (very large)
spread: -5px (smaller)
box-shadow: 0 0 10px 0px rgba(0,0,0,0.5); /* No spread */
box-shadow: 0 0 10px 5px rgba(0,0,0,0.5); /* 5px spread */
box-shadow: 0 0 10px 10px rgba(0,0,0,0.5); /* 10px spread */
box-shadow: 0 0 10px -5px rgba(0,0,0,0.5); /* -5px spread */

🔲 26. box-shadow: color (Shadow Color)

📍 Definition: Changes the color of the shadow. Can use any color format (hex, rgb, rgba, named colors). RGBA with transparency is most common for realistic shadows.
Black shadow
Red shadow
Blue shadow
Gold shadow
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Black shadow */
box-shadow: 0 5px 15px rgba(255, 0, 0, 0.5); /* Red shadow */
box-shadow: 0 5px 15px rgba(0, 0, 255, 0.5); /* Blue shadow */
box-shadow: 0 5px 15px rgba(255, 215, 0, 0.5); /* Gold shadow */